<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<parent></parent>
</div>
<script>
	//在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
	var childNode = {
		template : `<div>{{myMessage}}</div>`,//创建子组件模板
		props : ['myMessage'],//将父组件的属性传给childNode这个子组件
	};
	var parentNode = {
		template : `
			<div class="parent">
				<child :my-message="data1"></child>
				<child :my-message="data2"></child>
			</div>
		`,//创建父组件模板
		components : {
			'child' : childNode,
		},
		data(){
			return {
				data1 : 'aaa',
				data2 : 'bbb',
			}
		}
	};
	var vm = new Vue({
		el : '#root',
		data : {},
		components : {
			'parent' : parentNode,
		}
	})
</script>	
</body>
</html>